<template>
    <div class="header">
        <div class="logo">hi,mygirl后台管理系统</div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    <img class="user-logo" v-bind:src="usericon"> {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="userSetting">设置</el-dropdown-item>
                    <el-dropdown-item command="aboutme">关于</el-dropdown-item>
                    <el-dropdown-item command="isLoginout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="nav-menu">
            <el-menu theme="dark" mode="horizontal" @select="handleSelect">
                <el-submenu index="1">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>
<script>
import Storage from '../../utils/storage.js'
import userApi from '../../api/userApi'
import { commonApi } from '../../api/api'

export default {
    data() {
        return {
            dialogVisible: false,
            warnMsg: 'hello'
        }
    },
    computed: {
        username() {
            let userinfo = Storage.fetch('userinfo')
            return userinfo ? userinfo.username : 'admin';
        },
        usericon() {
            let userinfo = Storage.fetch('userinfo')
            return userinfo.logoRes ? commonApi.retrieveFileUrl(userinfo.logoRes) : '../../../static/img/default-head.png';
        }
    },
    methods: {
        handleCommand(command) {
            const self = this;
            if (command == 'isLoginout') {
                self.$confirm('您确定要离开了嘛?', '提示', {
                    confirmButtonText: '忍心离开',
                    cancelButtonText: '手下留情',
                    type: 'warning'
                }).then(() => {
                    self.loginout()
                }).catch((msg)=>{
                    console.log(msg+'退出登录');
                })
            } else if (command == 'userSetting') {
                self.$router.push('userinfo');
            } else if (command == 'aboutme') {
                self.$router.push('aboutme');
            }
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        loginout() {
           userApi.loginOut()
                .then(
                response => {
                    console.log('退出登录的状态' + response.status)
                    if (response.status == 200 || response.status == 204) {
                        this.dialogVisible = false
                        this.$store.dispatch('doLogout')
                        this.$router.replace('/login');
                    }
                })
                .catch(
                error => {
                    console.log(error);
                    this.$message.error(error.message);
                });
        }
    }
}
</script>
<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    font-size: 22px;
    line-height: 70px;
    color: #fff;
    background: #000000;
}

.header .logo {
    float: left;
    width: 250px;
    text-align: center;
}

.nav-menu {
    float: right;
    padding-right: 50px;
    font-size: 16px;
    color: #fff;
}

.user-info {
    float: right;
    padding-right: 50px;
    font-size: 16px;
    color: #fff;
}

.user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 50px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.user-info .user-logo {
    position: absolute;
    left: 0;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
</style>
